<template>
	<el-form ref="form" class="goods-info" :model="goodsInfo" label-width="140px">
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card class="box-card">
					<el-scrollbar ref="scroll" style="overflow-x: hidden">
						<el-row>
							<el-col :span="12">
								<el-form-item label="商品名称" prop="goodsName">
									<el-input v-model="goodsInfo.goodsName" :disabled="disabel"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="商品编号sku" prop="sku">
									<el-input :disabled="true" v-model="goodsInfo.sku"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="优采售卖价格" prop="goodsPrice">
									<el-input :disabled="disabel"
										@keyup.native="goodsInfo.goodsPrice = formatPrice(goodsInfo.goodsPrice)"
										v-model="goodsInfo.goodsPrice"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="优采未税单价(元)" prop="excludeTaxPrice">
									<el-input v-model="goodsInfo.excludeTaxPrice"
										@keyup.native="goodsInfo.excludeTaxPrice = formatPrice(goodsInfo.excludeTaxPrice)"
										:disabled="disabel">
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="官网价格" prop="officialPrice">
									<el-input :disabled="disabel"
										@keyup.native="goodsInfo.officialPrice = formatPrice(goodsInfo.officialPrice)"
										v-model="goodsInfo.officialPrice"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="协议价(元)" prop="agreementPrice">
									<el-input :disabled="disabel"
										@keyup.native="goodsInfo.agreementPrice = formatPrice(goodsInfo.agreementPrice)"
										v-model="goodsInfo.agreementPrice"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="协议未税价(元)" prop="initExcludeTaxPrice">
									<el-input :disabled="disabel"
										@keyup.native="goodsInfo.initExcludeTaxPrice = formatPrice(goodsInfo.initExcludeTaxPrice)"
										v-model="goodsInfo.initExcludeTaxPrice"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="税率" prop="taxRate">
									<el-input :disabled="true" v-model="goodsInfo.taxRate"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="规格型号" prop="typeNo">
									<el-input v-model="goodsInfo.typeNo" :disabled="disabel"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="供应商" prop="sku">
									<el-input :disabled="true" v-model="goodsInfo.supplierName"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="品牌名称" prop="brandName">
									<el-select :disabled="disabel" v-model="goodsInfo.brandId" filterable remote
										:remote-method="remoteMethod" @change="changeBrand" placeholder="请输入关键词">
										<el-option v-for="item in brandList" :key="item.id" :label="item.nameShow"
											:value="item.id">{{ item.nameShow }}</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="进口标识" prop="isImport">
									<el-radio-group v-model="goodsInfo.isImport" :disabled="disabel">
										<el-radio label="国产">国产</el-radio>
										<el-radio label="进口">进口</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">

							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="计量单位" prop="saleUnit">
									<el-input v-model="goodsInfo.saleUnit" :disabled="true"></el-input>
								</el-form-item>
							</el-col>

							<el-col :span="12">
								<el-form-item label="商品重量（千克）" prop="goodsWeight">
									<el-input v-model="goodsInfo.goodsWeight"
										@keyup.native="goodsInfo.goodsWeight = formatPrice(goodsInfo.goodsWeight)"
										:disabled="disabel" autocomplete="off">
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="8">
								<el-form-item label="一级分类" prop="taxRate">
									<el-select :disabled="disabel" v-model="goodsInfo.primaryCategory"
										@change="changePrimaryCategory">
										<el-option v-for="item in primaryCategory" :key="item.id"
											:label="item.categoryName" :value="item.id">{{ item.categoryName }}
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="二级分类" prop="taxRate">
									<el-select :disabled="disabel" v-model="goodsInfo.secondaryCategory"
										@change="changeSecondaryCategory">
										<el-option v-for="item in secondaryCategory" :key="item.id"
											:label="item.categoryName" :value="item.id">
											{{ item.categoryName }}
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="三级分类" prop="taxRate">
									<el-select :disabled="disabel" v-model="goodsInfo.tertiaryCategory"
										@change="changeTertiaryCategory">
										<el-option v-for="item in tertiaryCategory" :key="item.id"
											:label="item.categoryName" :value="item.id">
											{{ item.categoryName }}
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="24">
								<el-form-item label="简单配置" prop="goodsWeight">
									<el-input type="textarea" show-word-limit maxlength="1000" rows="5"
										v-model="goodsInfo.goodsParam" :disabled="true"></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="24">
								<el-form-item label="基本参数" prop="goodsParam">
									<el-input type="textarea" show-word-limit maxlength="1000" rows="5"
										v-model="goodsInfo.goodsProperty" :disabled="true"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="主要图片" prop="mainFiles">
									<el-image :src="getImage(goodsInfo.goodsImagePath)" lazy 
										:preview-src-list="viewImageList" style="border: 1px solid #eee;width: 100px;" >
									</el-image>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="一般图片" prop="files">
									<template v-for="path in viewImageList">
										<el-image :src="path" :preview-src-list="viewImageList" lazy
											style="border: 1px solid #eee;width: 100px;margin-right: 5px">
										</el-image>
									</template>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="商品介绍" class="products">
									<div class="" v-html="goodsInfo.goodsIntroduce" style="border: 1px solid #eeeeee;">

									</div>
								</el-form-item>
							</el-col>
						</el-row>

					</el-scrollbar>
				</el-card>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
	import { queryGodCategoryZtreeAsyn } from "@/api/supplier.api"
	import { searchBrands, getBrand } from "@/api/brand.api";
	export default {
		name: "goodsinfoBox",
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			disabel: {
				type: Boolean,
				default: () => {
					return true;
				}
			}
		},
		data() {
			return {
				goodsInfo: {},
				imgList: [],
				primaryCategory: [],
				secondaryCategory: [],
				tertiaryCategory: [],
				brandList: [],
				viewImageList: []
			}
		},
		methods: {
			formatPrice(price) {
				price = price.replace(
					/^\D*(\d*(?:\.\d{0,2})?).*$/g,
					'$1'
				)
				return price
			},
			remoteMethod(query) {
				if (query !== '') {
					searchBrands(query).then(res => {
						this.brandList = res
					})
				}
			},
			changeBrand(brand) {
				this.brandList.map(row => {
					if (row.id == brand) {
						this.goodsInfo.brandName = row.showName
						this.goodsInfo.brandCode = row.dcCode
					}
				})
			},
			changePrimaryCategory(id) {
				this.goodsInfo.secondaryCategory = "";
				this.goodsInfo.secondaryCategoryName = "";
				this.secondaryCategor = []
				this.tertiaryCategory = []
				queryGodCategoryZtreeAsyn(id, 1).then(res => {
					this.secondaryCategory = res;
				})
				this.goodsInfo.tertiaryCategory = "";
				this.goodsInfo.tertiaryCategoryName = "";
				this.goodsInfo.categoryName = "";

				this.primaryCategory.map(row => {
					if (row.id == id) {
						this.$nextTick(() => {
							this.goodsInfo.primaryCategory = row.id
							this.goodsInfo.primaryCategoryName = row.categoryName
						})
					}
				})
			},
			changeSecondaryCategory(id) {
				this.goodsInfo.tertiaryCategory = "";
				this.goodsInfo.tertiaryCategoryName = "";
				this.goodsInfo.categoryName = "";
				this.tertiaryCategory = []
				queryGodCategoryZtreeAsyn(id, 1).then(res => {
					this.tertiaryCategory = res;
				})
				this.secondaryCategory.map(row => {
					if (row.id == id) {
						this.$nextTick(() => {
							this.goodsInfo.secondaryCategory = row.id
							this.goodsInfo.secondaryCategoryName = row.categoryName
						})
					}
				})
			},
			changeTertiaryCategory(id) {
				this.tertiaryCategory.map(row => {
					if (row.id == id) {
						this.$nextTick(() => {
							this.goodsInfo.tertiaryCategory = row.id
							this.goodsInfo.tertiaryCategoryName = row.categoryName
							this.goodsInfo.categoryName = row.categoryName
						})
					}
				})
			},
			getImage(path) {
				if(path) {
					let resPath;
					if(path.indexOf("?") > 0) {
						resPath = path + "&t=" + new Date().getTime()
					}else {
						resPath = path + "?t=" + new Date().getTime()
					}
					return resPath;
				}
			},
			showImage(path) {
				this.imagePath = path
				this.dialogImageShow = true
			}
		},
		watch: {
			info(newValue, oldValue) {
				if (!newValue) return;
				this.goodsInfo = newValue
				this.imgList = [];
				// 初始化图片列表
				this.viewImageList = [];
				if (newValue.goodsImageList) {
					this.imgList = newValue.goodsImageList.split(',');
				}
				this.viewImageList.push(this.goodsInfo.goodsImagePath);
				this.imgList.forEach(row => {
					this.viewImageList.push(row);
				})

				// 初始化分类列表
				this.primaryCategory = [];
				queryGodCategoryZtreeAsyn("", 1).then(res => {
					this.primaryCategory = res;
				})
				this.secondaryCategor = []
				if (this.goodsInfo.primaryCategory != "" && this.goodsInfo.primaryCategory != null) {
					queryGodCategoryZtreeAsyn(this.goodsInfo.primaryCategory, 1).then(res => {
						this.secondaryCategory = res;
					})
				}
				this.tertiaryCategory = [];
				if (this.goodsInfo.secondaryCategory != "" && this.goodsInfo.secondaryCategory != null) {
					queryGodCategoryZtreeAsyn(this.goodsInfo.secondaryCategory, 1).then(res => {
						this.tertiaryCategory = res;
					})
				}

				// 初始化品牌
				this.brandList = [];
				if (this.goodsInfo.brandId != null && this.goodsInfo.brandId != "") {
					getBrand(this.goodsInfo.brandId).then(res => {
						this.brandList = res
					})
				}
			},
			immediate: true,
			deep: true
		},
	}
</script>

<style lang="scss" scoped>
	.goods-info::v-deep {
		overflow: hidden;
		
		.el-col{
			height: auto;
		}
		
		.box-card{
			height: 100%;
			overflow-y: scroll;
		}

		.el-form-item {
			margin-bottom: 15px;
		}
	}
</style>
